<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { getClassList } from '../api/class/classlist'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { showToast, Toast } from 'vant'

import { getimage } from '../hooks/image'
export default defineComponent({
  components: {},
  setup() {
    let router = useRouter()
    let classList: any = ref(null)
    const list: any = ref([])
    const loading = ref(false)
    const finished = ref(false)
    let token = localStorage.getItem('token');

    let searchclass: any = (): any => {
      router.push({
        path: '/searchclass'
      })
    }

    let click_class = (groupId: number, price: number) => {
      router.push({
        path: '/classDes',
        query: {
          groupId,
          price: price,
        }
      })
    }


    let myclass: any = (): any => {
      if (token != undefined) {
        router.push({
          path: '/myclass'
        })
      }
      else {
        showToast('请登录');


        router.push({
          path: '/register',
        })
      }
    }
    let getClassListFun = () => {
      getClassList().then((data: any) => {
        console.log('课堂数据=>', data)
        classList.value = data.data.groups.itemList
        console.log('课堂数据classList=>', classList.value)
        classList.value.forEach((item: any) => {
          if (`${item.price}`.indexOf('.')==-1) {
            item.price = item.price + '.00';
          }
        })
        console.log('修改后的classList=>', classList.value)
      })
    }
    let count = 0
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求;

      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          if (count * 10 + i >= classList.value.length) {
            finished.value = true
            return
          }

          list.value.push(classList.value[count * 10 + i])
        }

        // 加载状态结束
        loading.value = false

        // 数据全部加载完成
        if (list.value.length >= classList.length) {
          finished.value = true
        }
        count += 1
      }, 1000)
    }
    onMounted(() => {
      getClassListFun()
    })
    return {
      searchclass,
      click_class,
      myclass,
      classList,
      getimage,
      viewCount,
      list,
      onLoad,
      loading,
      finished
    }
  }
})
</script>
<template>
  <div>
    <!-- 搜索部分 -->
    <div class="class-search">
      <div class="search-content" @click="searchclass">
        <div class="logo">
          <span class="iconfont icon-sousuo1"> </span>
        </div>
        <div class="word">搜索课程</div>
      </div>
      <div class="myclass" @click="myclass">
        <span class="iconfont icon-jihua"></span>
        我的课程
      </div>
    </div>
    <!-- 头部搜索结束 -->
    <!-- 轮播图开始 -->
    <div class="search-banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :width:="345">
        <van-swipe-item>
          <img
            src="https://cc.hjfile.cn/cc/img/20230523/2023052304521187358823.jpg?imageView2/2/w/1000/format/webp/ignore-error/1?param=5y5"
            alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://cc.hjfile.cn/cc/img/20230607/2023060710372792535928.jpg?imageView2/2/w/1000/format/webp/ignore-error/1?param=5y5"
            alt="" />
        </van-swipe-item>

        <van-swipe-item>
          <img
            src="https://cc.hjfile.cn/cc/img/20230605/2023060503214392773729.png?imageView2/2/w/1000/format/webp/ignore-error/1?param=5y5"
            alt="" />
        </van-swipe-item>

        <van-swipe-item>
          <img
            src="https://cc.hjfile.cn/cc/img/20230605/2023060509453573574609.jpg?imageView2/2/w/1000/format/webp/ignore-error/1?param=5y5"
            alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图结束 -->
    <!-- 推荐课程 -->
    <div class="rcmdclass">
      <h1>课程推荐</h1>
      <!-- 课程列表 -->
      <div class="classlist">
        <ul>
          <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <li @click="click_class(item.groupId, item.price)" v-for="item in list" :key="item.groupId">
              <div class="classimg" :style="'background: url(' + getimage(item.avatar) + ') no-repeat 50% 50%/100%'">
                <!-- // <img :src="getimage(item.avatar)" alt="" /> -->
              </div>
              <div class="list-right">
                <div class="smalltag" v-if="item.categoryName">
                  <span>{{ item.categoryName }}</span>
                </div>
                <span>{{ item.groupName }}</span>
                <div class="list-count one-text-cut">
                  {{ item.ownerName }} | {{ item.lessonCount }}课时 |
                  {{ viewCount(item.memberCount) }}人在学习
                </div>
                <div class="price" v-if="item.price!=0.00">￥{{ item.price }}</div>
                <div class="price" v-else>免费</div>
              </div>
            </li>
          </van-list>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.class-search {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  position: relative;
  background-color: #fff;

  .search-content {
    height: 30px;
    flex: 1;
    background-color: #f4f5f7;
    border-radius: 20px;
    margin-left: 15px;

    .logo {
      color: #8e8f94;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 25px;

      span {
        font-weight: 600;
        font-size: 14px;
      }
    }

    .word {
      color: #8e8f93;
      font-size: 12px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 50px;
    }
  }

  .myclass {
    width: 111px;
    padding-left: 11px;
    box-sizing: border-box;
    color: #1f1e32;
    font-size: 15px;

    span {
      margin-right: 2px;
    }
  }
}

.search-banner {
  padding: 0 15px;
  background-color: #fff;

  img {
    width: 100%;
    height: 132px;
  }
}

.rcmdclass {
  padding: 0 15px;
  margin-top: 10px;
  background-color: #fff;

  h1 {
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
  }

  .classlist {
    ul {
      li {
        display: flex;
        margin-bottom: 15px;

        .classimg {
          width: 140px;
          height: 90px;
          flex-shrink: 0;

          img {
            width: 146px;
            height: 90px;
          }
        }

        .list-right {
          margin-left: 10px;

          .smalltag {
            display: inline-block;
            background: #464d5c;
            padding: 1px 2px;
            line-height: 15px;
            margin-right: 2.5px;
            color: #fff;
            font-size: 12px;

            span {
              display: inline-block;
              transform: scale(0.9);
            }
          }

          &>span {
            font-size: 14px;
          }

          .list-count {
            color: #687583;
            font-size: 12px;
            line-height: 30px;
            width: 196px;
          }

          .price {
            color: #ff3271;
            font-weight: 700;
            font-size: 14px;
          }
        }
      }
    }
  }
}</style>